<template>
	<view class="myBg">
		<myBar :opacity="barOpct"></myBar>
		<!-- 个人信息 -->
		<view class="userInfoBox">
			<view class="userInfo" @tap="toNewPage" data-url="setting">
				<image :src="(userInfo&&userInfo.pic)?userInfo.pic:'../../static/userPic.png'"></image>
				<view class="infoBox">
					<view class="nameBox">
						<text class="userName">{{userInfo?userInfo.nickname:'未登录'}}</text>
						<view class="vipBox" v-if="(userInfo&&userInfo.code)">
							<text class="iconfont icon-zuanshihuiyuan"></text>
							<text class="">合伙人</text>
						</view>
					</view>
					<view class="codeBox" v-if="isLogin && userInfo.code " @tap.stop="copyCode">
						<text class="code">邀请码{{userInfo.code}}</text>
						<text class="copy" >复制</text>
					</view>
				</view>
			</view>
			<view class="setBtnBox">
				<image src="../../static/setting.png" @tap="toPage" data-url="setting"></image>
			</view>
			<!-- <view class="jjBox">
				<text>成长基金</text>
				<text class="jjCount">123456</text>
			</view> -->
			<view v-if="isLogin" class="memberEnter" @tap="toPage" data-url="memberList" data-select="0">
				<text >学员列表</text>
				<text class="iconfont icon-right"></text>
			</view>
			
		</view>

		<!-- 订单入口 -->
		<view class="orderEnter">
			<view class="boxTitle">
				<text class="tt1">我的订单</text>
				<text class="tt2" @tap="toNewPage" data-url="orderList">查看全部</text>
				<text class="iconfont icon-right" @tap="toNewPage" data-url="orderList"></text>
			</view>
			<view class="enterBox">
				<view class="enterItem" @tap="toNewPage" data-url="orderList" data-status="20">
					<image src="../../static/order1.png"></image>
					<text>待付款</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="orderList" data-status="5">
					<image src="../../static/order2.png"></image>
					<text>待开课</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="evaluateList" >
					<image src="../../static/order5.png"></image>
					<text>评价</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="refoundList">
					<image src="../../static/order4.png"></image>
					<text>退款</text>
				</view>
			</view>
		</view>

		<!-- 课程提醒 -->
		<!-- <view class="orderEnter">
			<view class="boxTitle">
				<text class="tt1">课程提醒</text>
				<text class="tt2">全部课程</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="remindBox">
				<curriculumRemind></curriculumRemind>
			</view>
		</view> -->

		<!-- 订单入口 -->
		<view class="orderEnter ">
			<view class="enterBox enterBox2">
				<view class="enterItem" @tap="toNewPage" data-url="car">
					<image src="../../static/et3.png"></image>
					<text>购物车</text>
				</view>
				<view class="enterItem"  data-url="zeroList" @tap="toPage">
					<image src="../../static/et1.png"></image>
					<text>0元购</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="myCoupon" >
					<image src="../../static/et6.png"></image>
					<text>优惠券</text>
				</view>
				<!-- <view class="enterItem" @tap="toPage" data-url="newGift" >
					<image src="../../static/et6.png"></image>
					<text>优惠券</text>
				</view> -->
				<view class="enterItem" @tap="toCvDt" data-url="conversationDt">
					<image src="../../static/et4.png"></image>
					<text>客服</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="myCollection" >
					<image src="../../static/et5.png"></image>
					<text>我的关注</text>
				</view>
			</view>
		</view>
		
		<view class="orderEnter">
			<view class="boxTitle">
				<text class="tt1">拼好课</text>
			</view>
			<view class="enterBox">
				<view class="enterItem enterItem2" @tap="toNewPage" data-url="myGroupList">
					<image src="../../static/group1.png"></image>
					<text>我的开团</text>
				</view>
				
				<view class="enterItem enterItem2" @tap="toNewPage" data-url="groupReturn" >
					<image src="../../static/group2.png"></image>
					<text>提现</text>
				</view>
		
				<view class="enterItem enterItem2" @tap="toPage" :data-url="initInfo.award">
					<image src="../../static/group3.png"></image>
					<text>奖励规则</text>
				</view>
				<view class="enterItem enterItem2" @tap="toNewPage" data-url="joinTeam" v-if=" !isLogin || !userInfo.code" >
					<image src="../../static/group4.png"></image>
					<text>加入合伙人</text>
				</view>
				<view class="enterItem enterItem2" v-if="isLogin && userInfo.code" @tap="toNewPage" data-url="myTeam" >
					<image src="../../static/group5.png"></image>
					<text>我的团队</text>
				</view>
			</view>
		</view>
		
		<block v-if="initInfo.enter_banner">
			<view class="bannerBox" v-if="!isLogin || userInfo.registAward==0">
				<image class="myBanner" src="http://s.de123.com/myCoupon.png" mode="widthFix" @tap="toPage" data-url="newGift" ></image>
			</view>
		</block>
		
		
		<!-- 推荐商品 -->
		<view class="rmdTitle">
			<image src="../../static/jingxuan.png"></image>
			<text>精选推荐</text>
		</view>
		<goodList :goodData="rmdList"></goodList>
	</view>
</template>

<script>
	import curriculumRemind from "../../components/curriculumRemind/curriculumRemind.vue";
	import goodList from "../../components/goodList/goodList.vue";
	import myBar from "../../components/myBar/myBar.vue";
	import COMM from "../../common/common.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {

		components: {
			curriculumRemind,
			goodList,
			myBar
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				selectCity:state=>state.map.selectCity,
				initInfo:state=>state.sys.initInfo,
				locationCity: state => state.map.locationCity,
			})
		},
		data() {
			return {
				hasNext: true,
				rmdFilter:{
					page_no:1,
					page_size:10,
					areaId:0
				},
				rmdList: [],
				barOpct:'0'
			};
		},
		watch: {
			selectCity(newVal){
				this.hasNext=true;
				this.rmdList=[];
				this.rmdFilter={
					page_no:1,
					page_size:10,
					areaId:newVal.cityCode
				};
				this.getRmd();
			}
		},
		methods: {
			getRmd() {
				this.rmdFilter.areaId=this.selectCity.cityCode;
				this.rmdFilter.guideCate=uni.getStorageSync("xinqu");
				if (this.hasNext) {
					this.$store.dispatch("apiGetRmdGoodList", this.rmdFilter).then(res => {
						this.rmdList = this.rmdList.concat(res.data.data.items)
						this.rmdFilter.page_no = res.data.data.nextPage;
						this.hasNext = res.data.data.hasNext
					})
				} else {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}

			},
			toNewPage(e) {
				if (this.isLogin) {
					this.toPage(e)
				} else {
					this.toPage("login")
				}
			},
			toSharePage(e){
				uni.navigateTo({
					url:'../sharePageView/sharePageView?url='+e.currentTarget.dataset.url
				})
			},
			toCvDt() {
				let _this = this;
				if (this.isLogin) {
					let toImid = 'user0'
					if (getApp().globalData.TIM_SDK_READY) {
						this.toPage({
							url: 'conversationDt',
							cvid: 'C2C' + toImid,
							toImId: toImid
						})
					} else {
						_this.$store.dispatch("timLogin",this.userInfo.imid).then(res => {
							uni.showLoading({
								title: '会话跳转中',
								mask: false
							});
							setTimeout(() => {
								uni.hideLoading()
								this.toPage({
									url: 'conversationDt',
									cvid: 'C2C' + toImid,
									toImId: toImid
								})
							}, 1000)
						})
					}
				} else {
					this.toPage("login")
				}
			},
			toOth() {
				uni.showToast({
					title: '该功能正在开发中，敬请期待',
					icon: 'none'
				});
			},
			copyCode(){
				uni.setClipboardData({
				    data:this.userInfo.code,
				    success: ()=>{
				       uni.showToast({
				       	title: '邀请码复制成功',
				       	icon: 'none'
				       });
				    }
				});
			}
		},
		onShow() {

		},
		onLoad() {
			this.getRmd();
			uni.$on("roadsChange",()=>{
				this.hasNext=true;
				this.rmdList=[];
				this.rmdFilter={
					page_no:1,
					page_size:10,
					areaId:this.locationCity.adcode.substr(0, 4)
				};
				this.getRmd();
			})
		},
		// 页面滚动到底部
		onReachBottom() {
			this.getRmd()
		},
		onPageScroll(e){
			if(e.scrollTop>150){
				this.barOpct='1'
			}else {
				this.barOpct=parseFloat(e.scrollTop/150).toFixed(2).toString()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getRmd()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.bannerBox{
		padding: 0 18upx;
		.myBanner{
			width: 100%;
			border-radius: 10upx;
		}
	}
	
	.myBg {
		background-color: #f4f4f4;
	}

	.userInfoBox {
		background-image: url('~@/static/myBg.png');
		height: 318upx;
		background-size: 100% 100%;
		position: relative;

		.memberEnter {
			position: absolute;
			right: 0;
			bottom: 38upx;
			height: 46rpx;
			font-size: 26upx;
			color: #FFFFFF;
			line-height: 46upx;
			background-color: #e39e0f;
			border-top-left-radius: 23upx;
			border-bottom-left-radius: 23upx;
			display: flex;
			align-items: center;
			padding-left: 20upx;
		}

		.userInfo {
			position: absolute;
			top: 84upx;
			left: 35upx;
			display: flex;
			align-items: stretch;

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				margin-right: 34upx;
			}

			.infoBox {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				.nameBox{
					display: flex;
					align-items: center;
				}
				.codeBox{
					margin-top: 10upx;
					display: flex;
					font-size: 24upx;
					height: 44upx;
					line-height: 40upx;
					border: 2upx solid #FFFFFF;
					border-radius: 22upx;
					color: #FFFFFF;
					overflow: hidden;
					.code{
						padding-left: 10upx;
					}
					.copy{
						height: 100%;
						background-color: #FFFFFF;
						color: #ffa200;
						padding: 0 10upx;
						margin-left: 10upx;
					}
				}
				.vipBox{
					display: flex;
					align-items: center;
					font-size: 24upx;
					background-color: #0f1117;
					color: #fffa74;
					padding: 4upx 8upx;
					border-radius: 6upx;
					.iconfont{
						font-size: 28upx;
						margin-right: 8upx;
					}
				}
				.userName {
					font-size: 36upx;
					font-weight: bold;
					color: #07080d;
					margin-right: 16upx;
				}

				.userId {
					font-size: 25upx;
					color: #9e7000;
				}
			}
		}

		.setBtnBox {
			position: absolute;
			top: 77upx;
			right: 35upx;
			z-index: 9;
			/* #ifdef MP */
			right: 30%;

			/* #endif */
			image {
				width: 44upx;
				height: 44upx;
				margin-left: 40upx;

			}
		}

		.jjBox {
			position: absolute;
			left: 35upx;
			bottom: 38upx;

			text {
				font-size: 26upx;
				font-weight: bold;
				color: #07080d;
				line-height: 46upx;
			}

			.jjCount {
				display: inline-block;
				width: 206upx;
				height: 46upx;
				line-height: 46upx;
				border-radius: 23upx;
				box-sizing: border-box;
				background-image: url('~@/static/jijin.png');
				background-size: 100% 100%;
				text-align: center;
				color: #c9420d;
				padding-right: 60upx;
				margin-left: 14upx;
			}
		}
	}

	.orderEnter {
		margin: 14upx;
		background-color: #fdfdff;
		border-radius: 12rpx;

		.boxTitle {
			display: flex;
			padding: 18upx 18upx 0 18upx;
			align-items: center;

			.tt1 {
				font-size: 30upx;
				font-weight: bold;
				color: #07080d;
				flex: 1;
			}

			.tt2 {
				font-size: 26rpx;
				color: #9c9c9c;
			}

			.iconfont {
				margin-top: 4upx;
				font-size: 28rpx;
				color: #9c9c9c;
			}
		}

		.enterBox {
			display: flex;
			padding-top: 32upx;
			padding-bottom: 32upx;

			.enterItem {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.enterItem2{
				image{
					width: 75upx;
					height: 75upx;
				}
			}
			image {
				width: 67upx;
				height: 61upx;
				margin-bottom: 20upx;
			}

			text {
				text-align: center;
				font-size: 22rpx;
				color: #3b434d;
			}
		}

		.enterBox2 {
			image {
				width: 80upx;
				height: 80upx;
			}
		}

		.remindBox {
			padding-top: 32upx;
			padding-bottom: 17upx;
		}
	}

	.rmdTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20upx;

		image {
			width: 28upx;
			height: 25upx;
			margin-right: 10upx;
		}

		text {
			font-size: 26upx;
			color: #d92810;
		}
	}
</style>
